import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts';

function Water() {
    const ref2 = useRef()
    useEffect(() => {
        var chartDom2 = ref2.current;
        var myChart2 = echarts.init(chartDom2);
        var option2;

        option2 = {
            color: ['#FC5F5E', '#12D3FE', '#0C9D73', "#A060FB"],
            legend: {
                data: ['安防设备用电', '教学用水', '生态用水', '生活用水'],
                textStyle: {
                    color: '#fff'
                },
                icon: "circle",
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    axisTick: {
                        show: false //不显示坐标轴刻度线
                    },
                    axisLabel: {//x轴文字的配置
                        show: true,
                        color: "#fff",
                    }
                },
            ],
            yAxis: {},
            series: [
                {
                    name: '安防设备用电',
                    type: 'bar',
                    data: [90000, 75000, 60000, 100000, 70000, 75000],
                    barMaxWidth: 10,
                    itemStyle: {
                        borderRadius: [8, 8, 0, 0]
                    }
                },
                {
                    name: '教学用水',
                    type: 'bar',
                    data: [45000, 23000, 35000, 25000, 40000, 40000],
                    barMaxWidth: 10,
                    itemStyle: {
                        borderRadius: [8, 8, 0, 0]
                    }
                },
                {
                    name: '生态用水',
                    type: 'bar',
                    data: [50000, 50000, 40000, 27000, 50000, 50000],
                    barMaxWidth: 10,
                    itemStyle: {
                        borderRadius: [8, 8, 0, 0]
                    }
                },
                {
                    name: '生活用水',
                    type: 'bar',
                    data: [45000, 45000, 45000, 48000, 40000, 35000],
                    barMaxWidth: 10,
                    itemStyle: {
                        borderRadius: [8, 8, 0, 0]
                    }
                },
            ]
        };

        option2 && myChart2.setOption(option2);
    }, [])
    return (

        <div className="water-2" ref={ref2}>

        </div>

    )
}

export default Water
